{% extends 'base.html' %}
{% block content %}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-4">

            <div class="row">

                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <form action="/users/user_info/" id="form2" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="mb-3 row">
                                    <label for="username2" class="col-sm-3 col-form-label">用户名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" readonly="readonly" id="username"
                                               name="username"
                                               value="{{ user.username }}">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="username2" class="col-sm-3 col-form-label">手机号码</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="phone"
                                               name="phone"
                                               value="{{ user.phone|default:'' }}">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="email2" class="col-sm-3 col-form-label">邮箱</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="email" name="email"
                                               value="{{ user.email|default:'' }}">
                                    </div>
                                </div>

                                <div class="mb-3 row">
                                    <label for="gender2Radio1" class="col-sm-3 col-form-label">性别</label>
                                    {% if user.sex and user.sex == '男' %}
                                        <div class="col-sm-9">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="sex"
                                                       id="sex" value="男" checked>
                                                <label class="form-check-label" for="gender2Radio1">先生</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="sex"
                                                       id="sex" value="女">
                                                <label class="form-check-label" for="gender2Radio2">女士</label>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="col-sm-9">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="sex"
                                                       id="sex" value="男">
                                                <label class="form-check-label" for="gender2Radio1">先生</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="sex"
                                                       id="sex" value="女" checked>
                                                <label class="form-check-label" for="gender2Radio2">女士</label>
                                            </div>
                                        </div>
                                    {% endif %}

                                </div>

                                <div class="mb-3 row">
                                    <label for="age2" class="col-sm-3 col-form-label">年龄</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="age" name="age"
                                               value="{{ user.age|default:0 }}">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="age2" class="col-sm-3 col-form-label">真实姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="real_name" name="real_name"
                                               value="{{ user.real_name|default:'' }}">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="age2" class="col-sm-3 col-form-label">国籍</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="nationality" name="nationality"
                                               value="{{ user.nationality|default:'' }}">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="age2" class="col-sm-3 col-form-label">所在城市</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="city" name="city"
                                               value="{{ user.city|default:'' }}">
                                    </div>
                                </div>
                                <div class="row mb-3">

                                    <label for="formFile" class="col-sm-3 col-form-label">用户头像</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="file" id="user_icon" name="user_icon"
                                               autocomplete="off">
                                    </div>
                                </div>

                                <div class="mb-3 row">
                                    <div class="col-sm-9 offset-sm-3">
                                        <button type="submit" class="btn btn-primary">保存更改</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-column align-items-center text-center">
                                <img src="{{ user.user_icon.url }}" alt="Admin"
                                     class="rounded-circle p-1 bsa-bg-color4 bsa-width-100 bsa-height-100">
                                <div class="mt-3">
                                    <h4>{{ user.username }}</h4>
                                    <p class="text-secondary mb-1">播客用户</p>
                                    <p class="text-muted font-size-sm">{{ user.nationality|default:'中国' }} {{ user.city|default:'' }}</p>
                                    {#                                    <button class="btn btn-primary">关注</button>#}
                                    {#                                    <button class="btn btn-outline-primary">消息</button>#}
                                </div>
                            </div>
                            <hr class="my-4">
                            <ul class="list-group list-group-flush">
                                {#                                #}
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-globe bsa-font-20"></i> 个人网址</h6>
                                    <span class="text-secondary">https://www.yulin.com</span>
                                </li>
                                {#                                #}
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-star me-0"></i>  gitee地址</h6>
                                    <span class="text-secondary">https://gitee.com/wang-yu_ling</span>
                                </li>
                                {#                                #}
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-github bsa-font-20"></i> Github</h6>
                                    <span class="text-secondary">羽林</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock content %}